<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="全选" id="checkAll">
<input type="button" value="反选" id="inverseAll">
<input type="button" value="取消" id="cancelAll">

<table border="1" class="tb">
    <thead>
        <tr>
            <th>选择</th>
            <th>IP</th>
            <th>port</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>22</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>22</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>22</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>22</td>
        </tr>
    </tbody>
</table>


<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    //全选
    $('#checkAll').click( function(){$('.tb :checkbox').prop('checked',true)});
    //取消
    $('#cancelAll').click(function () {
        $('.tb :checkbox').prop('checked',false);
    });
    //反选
    // this，代指当前循环的每个元素,是DOM对象
    //DOM方式
    /*
    $('#inverseAll').click(function () {
        $('.tb :checkbox').each(function () {
            if(this.checked){
                this.checked = false;
            }else {
                this.checked = true;
            }
        })
    })
    */
    //jQuery方式
    //$(this)将DOM对象转换为jQuery对象
    /*
    $('#inverseAll').click(function () {
        $('.tb :checkbox').each(function () {
            if($(this).prop('checked')){
                $(this).prop('checked',false);
            }else {
                $(this).prop('checked',true);
            }
        })
    })
    */
    //三元运算方式
    $('#inverseAll').click(function () {
        $('.tb :checkbox').each(function () {
            var v = $(this).prop('checked')?false:true;
            $(this).prop('checked',v)
        })
    })
</script>
</body>
</html>